<template>
	<view class="action-order">
		<!-- <view class="address-box">
			<view class="address-content-list" v-if="showAddress">
				<view class="left">
					<view class="name-phone">
						<text class="name">{{ address.name }}</text>
						<text class="phone">{{ address.mobile }}</text>
					</view>
					<view class="address">
						{{ address.address_detail }}
					</view>
				</view>
				<view class="right">
					<image class="image" @click="navigateAddress(2, address.addressID)"
						src="/static/images/common/address_in.png" mode="widthFix"></image>
				</view>
			</view>
		</view> -->
		<view class="order-detail">
			<view class="mid-content">
				<view class="title">充值金额</view>
				<view class="input-content">
					<view class="symbol">￥</view>
					<input class="input-style" placeholder-class="placeholder-style" type="number" placeholder="请输入充值金额"
						v-model="money" :focus="numberFocusSix" @blur="lostFocusSix">
				</view>
				<view class="line-bottom"></view>
			</view>
			<!-- <view class="date">购买时间:&emsp;{{ order.date }}</view>
			<view class="content">
				<image class="detail-img" :src="order.imgUrl" mode="widthFix"></image>
				<view class="detail-content">
					<view class="title">{{ order.title }}</view>
					<view class="price-number">
						<view class="price" v-if="order.type === 1 || order.type === 2">￥ {{ order.price }}</view>
						<view class="price" v-else-if="order.type === 3">提货券： {{ order.price }}</view>
						<view class="price" v-else>积分： {{ order.price }}</view>
						<view class="number">X {{ order.number }}</view>
					</view>
				</view>
			</view>
			<view class="total-price">
				<view class="block"></view>
				<view class="block-two">
					<view class="total-goods">共{{ order.total_number }}件商品</view>
					<view class="price" v-if="order.type === 1 || order.type === 2">总金额￥{{ order.total_price }}</view>
					<view class="price" v-else-if="order.type === 3">共 {{ order.total_price }} 张提货券</view>
					<view class="price" v-else>共 {{ order.total_price }} 点积分</view>
				</view>
			</view>
			<view class="total-price-two">
				<view class="price" v-if="order.type === 1 || order.type === 2">实付款￥{{ order.total_price }}</view>
				<view class="price" v-else-if="order.type === 3">需消耗提货券 {{ order.total_price }} 张</view>
				<view class="price" v-else>需消耗积分 {{ order.total_price }} 点</view>
			</view> -->
			<!-- 付款码设置 -->
			<view class="main-content-one" v-if="showPay">
				<view class="button-group">
					<view :class="`button ${select_status_one == 0 ? 'active' : ''}`" @click="selectOne(0)">
						<image class="button-img" src="/static/images/common/alipay.png"></image>
						<view class="button-text">支付宝</view>
					</view>
					<view :class="`button ${select_status_one == 1 ? 'active' : ''}`" @click="selectOne(1)">
						<image class="button-img" src="/static/images/common/wechat.png"></image>
						<view class="button-text">微信</view>
					</view>
				</view>
				<view class="button-group">
					<view :class="`button ${select_status_one == 2 ? 'active' : ''}`" @click="selectOne(2)">
						<image class="button-img" src="/static/images/common/creditCard.png"></image>
						<view class="button-text">银行卡</view>
					</view>
					<view class="button-one"></view>
				</view>
				<view class="address-content" v-if="select_status_one === 0 || select_status_one === 1">
					<view class="upload-style">
						<view class="upload">
							<u-album class="show-img" :urls="userURL"></u-album>
						</view>
					</view>
				</view>
				<view class="input-content-style" v-if="select_status_one === 2">
					<view class="edit-content-input">
						<view class="input-title">手机号</view>
						<input class="input-style" type="number" placeholder-class="input-placeholder" placeholder="手机号"
							maxlength="11" v-model="mobile" :focus="numberFocus" @blur="lostFocus"
							:disabled="true"></input>
					</view>
					<view class="edit-content-input">
						<view class="input-title">姓名</view>
						<input class="input-style" type="text" placeholder-class="input-placeholder" placeholder="姓名"
							v-model="name" :focus="numberFocusTwo" @blur="lostFocusTwo" :disabled="true"></input>
					</view>
					<view class="edit-content-input">
						<view class="input-title">开户银行</view>
						<input class="input-style" type="text" placeholder-class="input-placeholder" placeholder="开户银行"
							v-model="bankName" :focus="numberFocusThree" @blur="lostFocusThree"
							:disabled="true"></input>
					</view>
					<view class="edit-content-input">
						<view class="input-title">支行</view>
						<input class="input-style" type="text" placeholder-class="input-placeholder" placeholder="支行名"
							v-model="bankOtherName" :focus="numberFocusFour" @blur="lostFocusFour"
							:disabled="true"></input>
					</view>
					<view class="edit-content-input-two">
						<view class="input-content">
							<view class="input-title">银行卡号</view>
							<input class="input-style" type="text" placeholder-class="input-placeholder"
								placeholder="银行卡号" maxlength="19" v-model="cardNumber" :focus="numberFocusFive"
								@blur="lostFocusFive" :disabled="true"></input>
						</view>
						<view class="copy-button" @click="copy">复制</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 收款码设置 -->
		<view class="main-content" v-if="showUpload">
			<view class="upload-style">
				<view :class="`${isUploadURL ? 'upload-two': 'upload'}`" @click="uploadImg('handheldIDCardImg')">
					<image :class="`img ${isUploadURL? ' success' : ''}`" src="/static/images/common/plus.png">
					</image>
					<view :class="`text ${isUploadURL? ' success' : ''}`">{{ tips }}</view>
					<image class="show-img" :src="isUploadURL" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="button-style">
			<view :class="`button ${isSuccess ? 'success' : ''}`" @click="touchOffDebounce">确认支付</view>
		</view>
		<!-- 弹窗 -->
		<view class="mask" v-if="showTips" @touchmove.stop.prevent>
			<u-transition :show="showTips">
				<view class="modal-bg-box">
					<view class="title">提示</view>
					<view class="inner-box">
						<text class="text-tips" :selectable="false">{{ maskTips }}</text>
						<view class="button-box">
							<view class="button-two" @click="confirm">确定</view>
						</view>
					</view>
				</view>
			</u-transition>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	import Fn from '@/common/public.js';
	import {
		recharge,
		getUserPay
	} from '@/common/api.js';
	export default {
		data() {
			return {
				/* 用户数据 */
				token: '', // 用户token
				imgUrl: store.state.baseUrl + '/api/common/uploadPic', // 上传图片接口
				name: '',
				mobile: '',

				/* 商品信息 */
				id: '', // 商品编号

				/* 收货地址 */
				// new_address: {}, // 选择新的地址
				// address: {}, // 地址详情


				/* 订单信息 */
				// order: {}, // 订单详情

				/* 卖方信息 */
				sellUser: '', // 卖方信息详情

				/* 充值金额 */
				money: '', // 充值金额
				numberFocusSix: false, // 充值金额输入框聚焦

				/* 选择按钮 - 收款码信息 */
				select_status: 2, // 选择收款码设置
				select_status_one: 0, // 选择支付码设置
				tips: '请上传支付截图', // 收款码提示
				isUploadURL: '', // 已上传收款码图片 /static/images/common/wechat.png
				userURL: [], // 卖方二维码

				/* 银行卡账号 */
				mobile: '', // 手机号
				name: '', // 姓名
				bankName: '', // 开户银行
				bankOtherName: '', // 开户支行
				cardNumber: '', // 银行卡号

				/* 输入状态 */
				numberFocus: false, // 手机号聚焦状态
				numberFocusTwo: false, // 账号 - 银行卡号 聚焦状态
				numberFocusThree: false, // 姓名聚焦状态
				numberFocusFour: false, // 开户银行聚焦状态
				numberFocusFive: false, // 银行卡号聚焦状态

				/* 弹窗 */
				maskTips: '', // 弹窗提示
				showTips: false, // 弹窗状态
				isSuccess: false, // 禁止点击

				/* 地址-收款码-付款码设置 */
				// showAddress: false, // 地址默认不显示
				showPay: true, // 付款码默认不显示
				showUpload: true, // 支付截图默认不显示
			};
		},
		mounted() {

		},
		onLoad(option) {
			/* 获取用户token */
			this.getToken();

			/* 获取支付信息 */
			this.getPayDetail();

			/* 查询订单信息 */
			// this.getOrderDetail();
		},
		onShow() {

		},
		methods: {

			/* 获取token */
			getToken() {
				this.token = uni.getStorageSync('token');
			},

			/* 获取数据 */
			getPayDetail() {
				const that = this;
				const params = {
					specialtype: 1
				};
				getUserPay(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						let imgList = [];
						that.sellUser = result;
						for (let i = 0; i < that.sellUser.length; i++) {
							if (that.sellUser[i].type === 2) {
								imgList.push(that.sellUser[i].img);
								that.userURL = imgList;
							};
							if (that.sellUser[i].type === 1) {
								that.mobile = that.sellUser[i].phone;
								that.name = that.sellUser[i].name;
								that.bankName = that.sellUser[i].bankName;
								that.bankOtherName = that.sellUser[i].bankOtherName;
								that.cardNumber = that.sellUser[i].cardNum;
							};
						};
					} else {
						Fn.Toast(res.msg, 2, 1500);
					};
				});
			},

			/* 提交增加防抖 */
			touchOffDebounce() {
				// 第一个参数为当前需要添加防抖的函数名 ***不需要加括号
				// 第二个为延时执行函数的时间
				// 第三个是否立即执行
				this.$debounce(this.addOrder, 1500, true);
			},

			/* 下订单 */
			addOrder() {
				const that = this;
				that.isSuccess = true;
				// if (that.order.type === 3 || that.order.type === 4) {
				const params = {
					money: that.money,
					type: that.select_status,
					img: that.isUploadURL
				};
				recharge(params).then((res) => {
					if (res.status === 1) {
						const result = res;
						that.maskTips = result.msg;
						that.showTips = true;
					} else {
						that.isSuccess = false;
						Fn.Toast(res.msg, 3, 1500);
					};
				});
				// return;
				// };
			},

			/* 选择收款设置 */
			// select(id) {
			// 	if (id === 0) {
			// 		this.select_status = 0;
			// 		this.tips = '支付宝支付截图';
			// 		this.isUploadURL = '';
			// 	} else if (id === 1) {
			// 		this.select_status = 1;
			// 		this.tips = '微信支付截图';
			// 		this.isUploadURL = '';
			// 	} else {
			// 		this.select_status = 2;
			// 		this.tips = '银行转账截图';
			// 		this.isUploadURL = '';
			// 	};
			// },

			/* 选择付款设置 */
			selectOne(id) {
				let imgList = [];
				if (id === 0) {
					this.select_status_one = 0;
					this.select_status = 2;
					// this.userURL = imgList;
					// for (let i = 0; i < this.sellUser.length; i++) {
					// 	if (this.sellUser[i].type === 2) {
					// 		imgList.push(this.sellUser[i].img);
					// 		this.userURL = imgList;
					// 	};
					// };
				} else if (id === 1) {
					this.select_status_one = 1;
					this.select_status = 3;
					// this.userURL = imgList;
					// for (let i = 0; i < this.sellUser.length; i++) {
					// 	if (this.sellUser[i].type === 3) {
					// 		imgList.push(this.sellUser[i].img);
					// 		this.userURL = imgList;
					// 	};
					// };
				} else {
					this.select_status_one = 2;
					this.select_status = 1;
				};
			},

			/* 上传图片 */
			uploadImg(type) {
				const that = this;
				uni.chooseImage({
					count: 1, //上传图片的数量，默认是9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths; //拿到选择的图片，是一个数组
						uni.uploadFile({
							url: that.imgUrl, //post请求的地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'Token': that.token // 设置Token头部
							},
							formData: {
								'upload_type': 'idCard' //formData是指除了图片以外，额外加的字段
							},
							success: (uploadFileRes) => {
								//这里要注意，uploadFileRes.data是个String类型，要转对象的话需要JSON.parse一下
								var result = JSON.parse(uploadFileRes.data);
								if (result.status === 1) {
									Fn.Toast(result.msg, 3, 1500);
									that.isUploadURL = result.data.src;
								} else {
									that.maskTips = result.msg;
									that.showTips = true;
									that.isUploadURL = '';
								};
							},
						});
					},
				});
			},

			/* 复制银行卡号 */
			copy() {
				uni.setClipboardData({
					data: this.cardNumber, //要被复制的内容
					success: () => { //复制成功的回调函数
						Fn.Toast('复制成功', 3, 1500); //提示
					},
					fail: () => {
						Fn.Toast('复制失败', 3, 1500); //提示
					}
				});
			},

			/* 确认 */
			confirm() {
				this.showTips = false;
				uni.navigateBack({
					delta: 1
				});
			},

			/* 失去焦点时 */
			lostFocus(event) {
				this.numberFocus = false;
			},

			/* 失去焦点时 */
			lostFocusTwo(event) {
				this.numberFocusTwo = false;
			},

			/* 失去焦点时 */
			lostFocusThree(event) {
				this.numberFocusThree = false;
			},

			/* 失去焦点时 */
			lostFocusFour(event) {
				this.numberFocusFour = false;
			},

			/* 失去焦点时 */
			lostFocusFive(event) {
				this.numberFocusFive = false;
			},

			/* 失去焦点时 */
			lostFocusSix(event) {
				this.numberFocusSix = false;
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fafafa;
	}

	uni-page-body {
		background: none;
	}

	.action-order {
		padding: 15px 18px 30px 18px;
		font-family: PingFang_Medium;

		.mask {
			position: fixed;
			z-index: 1001;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);

			.modal-bg-box {
				background-color: #FFFFFF;
				width: 580rpx;
				// height: 390rpx;
				position: absolute;
				left: 50%;
				top: 45%;
				transform: translate(-50%, -50%);

				.title {
					text-align: center;
					margin: 40rpx 0;
					font-size: 42rpx;
					font-weight: 600;
				}

				.inner-box {
					margin: 20rpx 20rpx 40rpx 20rpx;
					text-align: center;

					.text-tips {
						display: block;
						line-height: 70rpx;
						font-size: 36rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: bold;
						color: #89898C;
					}

					.button-box {
						text-align: center;
						margin-top: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.button-one {
							display: inline-block;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							margin: 0 40rpx 0 0;
							text-align: center;
							color: #000000;
							border: 2px solid #000000;
							border-radius: 8rpx;
							font-size: 26rpx;
							font-weight: bold;
							cursor: pointer;
						}

						.button-two {
							background-color: #000000;
							display: inline-block;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							// margin: 0 0 0 40rpx;
							text-align: center;
							color: #FFFFFF;
							border-radius: 8rpx;
							font-size: 26rpx;
							font-weight: bold;
							cursor: pointer;
						}
					}
				}
			}
		}

		// .address-box {
		// 	background-color: #FFFFFF;
		// 	border-radius: 8px;

		// 	.address-content-list {
		// 		padding: 30rpx 36rpx;
		// 		display: flex;
		// 		align-items: center;
		// 		justify-content: space-between;

		// 		.left {
		// 			width: 90%;

		// 			.name-phone {
		// 				font-weight: 600;

		// 				.name {
		// 					font-size: 36rpx;
		// 					margin-right: 30rpx;
		// 				}

		// 				.phone {
		// 					font-size: 28rpx;
		// 				}
		// 			}

		// 			.address {
		// 				margin-top: 12rpx;
		// 				color: #B4B4B7;
		// 				font-size: 28rpx;

		// 				.tips {
		// 					margin-right: 20rpx;
		// 					color: #000000;
		// 				}
		// 			}
		// 		}

		// 		.right {

		// 			.image {
		// 				width: 2vw;
		// 				height: 4vw;
		// 				cursor: pointer;

		// 				&:nth-of-type(n+2) {
		// 					margin-left: 26rpx;
		// 				}
		// 			}
		// 		}
		// 	}
		// }

		// .tips-content {
		// 	background-color: #FFFFFF;
		// 	margin: 20rpx 0;
		// 	padding: 30rpx 36rpx;
		// 	color: #AD4440;
		// 	font-size: 28rpx;
		// 	font-weight: 600;
		// }

		.order-detail {
			background-color: #FFFFFF;
			padding: 40rpx 30rpx;
			box-sizing: border-box;
			margin-top: 30rpx;

			.mid-content {
				// margin-top: 40rpx;
				padding: 0 30rpx;

				.title {
					font-size: 18px;
					// font-weight: 600;
					font-family: PingFang_Bold;
				}

				.input-content {
					margin: 20rpx 0;
					// padding: 8px 16px;
					display: flex;
					align-items: center;
					// border: 1px #FCEBD9 solid;
					// border-radius: 10px;

					.symbol {
						margin-right: 20rpx;
						font-size: 16px;
						// font-weight: 600;
						font-family: PingFang_Bold;
					}

					.input-style {
						width: 60vw;
						padding: 8px 16px;
						font-size: 16px;
						// font-weight: 600;
						// border: 1px #FCEBD9 solid;
						// border-radius: 10px;
					}

					.placeholder-style {
						color: #cccccc;
					}
				}

				.line-bottom {
					height: 2px;
					background-color: #F4F4F5;
				}
			}

			.main-content-one {
				background-color: #FFFFFF;
				margin: 40rpx 0 0 0;
				padding: 30rpx;
				// box-shadow: 0px 2px 5px #dedede;

				.button-group {
					display: flex;
					align-items: center;
					justify-content: center;

					.button {
						width: 20vw;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 8px 16px;
						cursor: pointer;

						&:nth-of-type(n+1) {
							margin-right: 10px;
						}

						&:nth-of-type(2) {
							margin-right: 0;
							margin-left: 10px;
						}

						.button-img {
							width: 5vw;
							height: 5vw;
						}

						.button-text {
							margin-left: 8px;
							font-size: 15px;
							// font-weight: 600;
							font-family: PingFang_Bold;
						}
					}

					.button-one {
						width: 20vw;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 8px 16px;
						margin-left: 10px;
					}

					.active {
						background-color: #F5F5F5;
					}
				}

				.upload-style {
					margin-top: 4vh;
					// border: 2px solid #E1E1E1;
					display: flex;
					justify-content: center;
					align-items: center;

					.upload {
						position: relative;
						// width: 30vw;
						// height: 44vw;
						// padding: 50rpx;
						text-align: center;
						// line-height: 7vw;
						// border: 2px solid #E1E1E1;
						// cursor: pointer;

						/* &.disabled {
							pointer-events: none;
							cursor: not-allowed;
						} */

						.img {
							position: relative;
							z-index: 1;
							width: 60rpx;
							height: 60rpx;
							top: 40%;
							transform: translateY(-50%);

							&.success {
								display: none;
								opacity: 0.5;
							}
						}

						.text {
							position: relative;
							z-index: 1;
							color: #b5b5b5;
							font-size: 26rpx;
							top: 50%;
							transform: translateY(-50%);

							&.success {
								display: none;
								opacity: 0.5;
							}
						}

						.show-img {
							// position: absolute;
							// top: 0;
							// left: 0;
							// bottom: 0;
							// right: 0;
							// margin: auto;
							width: 100%;
							height: 100%;
						}
					}
				}

				.content-text {
					text-align: center;
					margin: 60rpx 0;
					color: #b5b5b5;
					font-size: 28rpx;
				}
			}

			// .date {
			// 	color: #89898C;
			// 	font-size: 26rpx;
			// }

			// .content {
			// 	margin: 30rpx 0;
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: space-between;

			// 	.detail-img {
			// 		width: 23vw;
			// 		height: 23vw;
			// 	}

			// 	.detail-content {
			// 		width: 52vw;

			// 		.title {
			// 			font-size: 28rpx;
			// 		}

			// 		.price-number {
			// 			margin-top: 28rpx;
			// 			display: flex;
			// 			align-items: center;
			// 			justify-content: space-between;

			// 			.price {
			// 				font-size: 30rpx;
			// 				font-weight: 600;
			// 			}

			// 			.number {
			// 				color: #89898C;
			// 				font-size: 24rpx;
			// 				font-weight: 600;
			// 			}
			// 		}
			// 	}
			// }

			// .total-price {
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: space-between;
			// 	text-align: right;

			// 	.total-goods {
			// 		color: #89898C;
			// 		font-size: 26rpx;
			// 	}

			// 	.price {
			// 		margin-left: 20rpx;
			// 		font-size: 26rpx;
			// 	}

			// 	.block-two {
			// 		display: flex;
			// 		align-items: center;
			// 	}

			// 	.block {
			// 		width: 10rpx;
			// 	}
			// }

			// .total-price-two {
			// 	// display: flex;
			// 	// align-items: center;
			// 	// justify-content: right;
			// 	text-align: right;

			// 	.price {
			// 		margin-top: 20rpx;
			// 		font-size: 36rpx;
			// 		font-weight: 600;
			// 	}
			// }
		}

		.main-content {
			background-color: #FFFFFF;
			margin: 40rpx 0;
			padding: 30rpx;
			box-shadow: 0px 2px 5px #dedede;

			// .button-group {
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: center;

			// 	.button {
			// 		width: 20vw;
			// 		display: flex;
			// 		align-items: center;
			// 		align-content: center;
			// 		padding: 8px 16px;
			// 		cursor: pointer;

			// 		&:nth-of-type(n+1) {
			// 			margin-right: 10px;
			// 		}

			// 		&:nth-of-type(2) {
			// 			margin-right: 0;
			// 			margin-left: 10px;
			// 		}

			// 		.button-img {
			// 			width: 5vw;
			// 			height: 5vw;
			// 		}

			// 		.button-text {
			// 			margin-left: 8px;
			// 			font-size: 15px;
			// 			font-weight: 600;
			// 		}
			// 	}

			// 	.button-one {
			// 		width: 20vw;
			// 		display: flex;
			// 		align-items: center;
			// 		justify-content: center;
			// 		padding: 8px 16px;
			// 		margin-left: 10px;
			// 	}

			// 	.active {
			// 		background-color: #F5F5F5;
			// 	}
			// }

			.upload-style {
				margin: 4vh 0;
				display: flex;
				justify-content: center;
				align-items: center;

				.upload {
					position: relative;
					width: 30vw;
					height: 30vw;
					padding: 50rpx;
					text-align: center;
					// line-height: 7vw;
					border: 2px solid #E1E1E1;
					cursor: pointer;

					/* &.disabled {
						pointer-events: none;
						cursor: not-allowed;
					} */

					.img {
						position: relative;
						z-index: 1;
						width: 60rpx;
						height: 60rpx;
						top: 50%;
						transform: translateY(-50%);

						&.success {
							display: none;
							opacity: 0.5;
						}
					}

					.text {
						position: relative;
						z-index: 1;
						color: #b5b5b5;
						font-size: 26rpx;
						top: 50%;
						transform: translateY(-50%);

						&.success {
							display: none;
							opacity: 0.5;
						}
					}

					.show-img {
						// position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
						margin: auto;
						width: 100%;
						height: 100%;
					}
				}

				/* 上传图片成功 */
				.upload-two {
					// position: relative;
					width: 100%;
					// height: 44vw;
					// padding: 50rpx;
					// text-align: center;
					// line-height: 7vw;
					// border: 2px solid #E1E1E1;
					// cursor: pointer;

					/* &.disabled {
						pointer-events: none;
						cursor: not-allowed;
					} */

					.img {
						position: relative;
						z-index: 1;
						width: 60rpx;
						height: 60rpx;
						top: 40%;
						transform: translateY(-50%);

						&.success {
							display: none;
							opacity: 0.5;
						}
					}

					.text {
						position: relative;
						z-index: 1;
						color: #b5b5b5;
						font-size: 26rpx;
						top: 50%;
						transform: translateY(-50%);

						&.success {
							display: none;
							opacity: 0.5;
						}
					}

					.show-img {
						width: 100%;
						height: auto;
						// position: absolute;
						// top: 0;
						// left: 0;
						// bottom: 0;
						// right: 0;
						// margin: auto;
					}
				}

				// .content-text {
				// 	text-align: center;
				// 	margin: 60rpx 0;
				// 	color: #b5b5b5;
				// 	font-size: 28rpx;
				// }
			}
		}

		.input-content-style {
			margin-top: 40rpx;

			.edit-content-input {
				padding: 24rpx 22rpx;
				border: 1px solid #E1E1E1;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&:nth-of-type(n+2) {
					margin-top: 30rpx;
				}

				.input-style {
					width: 45vw;
					color: #58585a;
					font-size: 30rpx;
					// font-weight: 600;
					text-align: right;
				}

				.input-placeholder {
					color: #a5a5a8;
					font-size: 28rpx;
					// font-weight: 600;
				}

				.input-title {
					font-size: 28rpx;
					// font-weight: 600;
				}
			}

			.edit-content-input-two {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.input-content {
					width: 52vw;
					padding: 24rpx 22rpx;
					border: 1px solid #E1E1E1;
					// display: flex;
					// align-items: center;
					// justify-content: space-between;

					.input-style {
						// width: 45vw;
						color: #58585a;
						font-size: 30rpx;
						margin-top: 10rpx;
						// font-weight: 600;
						// text-align: right;
					}

					.input-placeholder {
						color: #a5a5a8;
						font-size: 28rpx;
						// font-weight: 600;
					}

					.input-title {
						font-size: 28rpx;
						// font-weight: 600;
					}
				}

				.copy-button {
					margin-left: 10rpx;
					padding: 10rpx 20rpx;
					background-color: #AD4440;
					color: #FFFFFF;
					font-size: 26rpx;
					border-radius: 3px;
					cursor: pointer;
				}
			}
		}

		.button-style {
			width: 80vw;
			line-height: 80rpx;
			margin: 80rpx auto 0 auto;
			text-align: center;

			.button {
				background-color: #FCEBD9;
				cursor: pointer;

				&.success {
					pointer-events: none;
					cursor: default;
				}
			}
		}
	}
</style>
